import { useMemo, useState } from "react";
import Mynao from "../../components/Mynao/Index";
import styles from "./Index.module.css";
import { useNavigate } from "react-router-dom";
import { SearchBar } from "antd-mobile";

/**
 * 科室分类数据配置
 * 定义了医院各个科室分类及其对应的子科室列表
 */
const departmentCategories: Record<string, string[]> = {
  外科: [
    "中医外科门诊",
    "门诊外一科",
    "门诊外二科",
    "门诊外三科",
    "门诊外四科",
    "神经外科",
  ],
  内科: ["消化内科", "心血管内科", "内分泌科", "肾脏内科"],
  全科门诊: ["全一科门诊", "全二科门诊", "全三课门诊", "全四科门诊"],
  口腔科: ["口腔内科", "口腔外科", "口腔修复科", "口腔正畸科"],
  耳鼻喉科: ["耳科", "鼻科", "咽喉科", "头颈外科"],
  皮肤科: ["皮肤内科", "皮肤外科", "性病科", "美容科"],
  妇产科: ["妇科", "产科", "计划生育科", "生殖医学科"],
  骨科: ["创伤骨科", "脊柱外科", "关节外科", "手外科"],
  儿科: ["小儿内科", "小儿外科", "新生儿科", "儿童保健科"],
};

/**
 * 科室列表页面组件
 * 功能：展示医院科室分类，支持左侧分类切换，右侧显示对应子科室
 */
function Index() {
  const nav = useNavigate(); // 路由导航钩子
  const [selectedCategory, setSelectedCategory] = useState("外科"); // 当前选中的科室分类状态
  const [search, setSearch] = useState(""); //搜索

  const getsou = useMemo(() => {
    const depart = departmentCategories[selectedCategory];

    //如果没有搜索关键词，返回所有科室
    if (!search.trim()) {
      return depart;
    }
    return depart.filter((item) => item.includes(search.trim()));
  }, [selectedCategory, search]);

  const handleSearch = (value: string) => {
    setSearch(value);
  };


  //清除搜索内容
  const handclear=()=>{
    setSearch('');
  }

  return (
    <div className={styles.kez}>
      <div className={styles.nav}>
        <Mynao title="科室列表" />
        <div className={styles.fang1}>
          <div className={styles.tup}>
            <img src="./yu.png" alt="" />
          </div>

          <div>
            <div className={styles.wen1}>
              四川省保健院南宛
              <span className={styles.wen3} onClick={() => nav("/yuan")}>
                切换院区{">"}
              </span>
            </div>
            <div className={styles.wen2}>四川省成都市锦江区溪路666号</div>
          </div>
        </div>

        <div className={styles.zi}>
          <div
            style={{ marginLeft: "20px", paddingTop: "10px", color: "gray" }}
          >
            不知道挂什么科,问问智能客服？
            <span style={{ color: "#1677ff", marginLeft: "40px" }}>去咨询</span>
          </div>
        </div>
      </div>

      <div className={styles.search}>
        <SearchBar
          placeholder="可输入科室名称检索"
          value={search}
          onChange={handleSearch}
          onClear={handclear}
          showCancelButton={false}
        />
      </div>

      {/* 主要内容区域：左侧分类 + 右侧子科室 */}
      <div className={styles.zuo}>
        {/* 左侧科室分类导航栏 */}
        <div className={styles.leftSidebar}>
          {Object.keys(departmentCategories).map((categoryItem, index) => (
            <div
              key={index}
              className={`${styles.leftItem} ${
                selectedCategory === categoryItem ? styles.active : ""
              }`}
              onClick={() => {
                setSelectedCategory(categoryItem); // 切换分类
                setSearch(''); // 清空搜索关键词
              }}
            >
              {categoryItem}
            </div>
          ))}
        </div>

        {/* 右侧子科室列表区域 */}
        <div className={styles.rightContent}>
          {getsou.length > 0 ? (
            getsou.map((departmentItem: string, index: number) => (
              <div
                key={index}
                className={styles.departmentItem}
                onClick={() => nav("/yi")}
              >
                {departmentItem}
              </div>
            ))
          ) : (
            <div className={styles.noResult}>
              未找到相关科室，请尝试其他关键词
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export default Index;
